<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span class="title">加班计薪规则</span>
      </div>
      <div>
        <el-button type="primary" @click="$router.push('/home/worksadd')">新增</el-button>
        <el-button class="del">删除</el-button>
      </div>
      <div class="div1">
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          :header-cell-style="{ textAlign: 'center' }"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          stripe
        >
          <el-table-column type="selection" width="50" align="center">
          </el-table-column>
          <el-table-column label="序号" width="50" align="center">
            <template slot-scope="scope">{{ scope.row.date }}</template>
          </el-table-column>

          <el-table-column
            prop="name"
            label="方案名称"
            width="200"
            align="center"
          >
          </el-table-column>
          <el-table-column align="center">
            <template slot-scope="scope">
              <el-tag
                type="warning"
                effect="dark"
                class="tags"
                v-if="scope.row.state"
              >
                默认
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
            label="工作日加班"
            width="130"
            align="center"
            prop="gzjia"
          >
          </el-table-column>
          <el-table-column
            label="周末加班"
            width="130"
            align="center"
            prop="zjia"
          >
          </el-table-column>
          <el-table-column
            label="节假日加班"
            width="130"
            align="center"
            prop="jajia"
          >
          </el-table-column>
          <el-table-column
            label="状态"
            width="150"
            align="center"
            prop="status"
          >
          </el-table-column>
          <el-table-column
            prop="time"
            label="操作时间"
            align="center"
            width="200"
          >
          </el-table-column>
          <el-table-column label="操作" width="350" align="center">
            <template slot-scope="scope">
              <el-button
                @click.native.prevent="deleteRow(scope.$index, tableData)"
                type="text"
              >
                <span @click="paths">编辑</span>
              </el-button>
              <el-button
                @click.native.prevent="deleteRow(scope.$index, tableData)"
                type="text"
              >
                <span>复制</span>
              </el-button>
              <el-button
                @click.native.prevent="deleteRow(scope.$index, tableData)"
                type="text"
              >
                <span>删除</span>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="div2">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage1"
          :page-size="10"
          layout="total, prev, pager, next"
          :total="num"
          background
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>
  
  <script>
export default {
  data() {
    return {
      tableData: [
        {
          date: "1",
          name: "加班计薪方案一",
          time: "2019/12/22 23:36:36",
          status: "启用",
          zjia: "150.0%",
          gzjia: "200.0%",
          jajia: "300.0%",
          state: true,
        },
        {
          date: "2",
          name: "加班计薪方案二",
          time: "2019/12/22 23:36:36",
          status: "启用",
          zjia: "150.0%",
          gzjia: "200.0%",
          jajia: "300.0%",
          state: false,
        },
        {
          date: "3",
          name: "加班计薪方案三",
          time: "2019/12/22 23:36:36",
          status: "启用",
          zjia: "150.0%",
          gzjia: "200.0%",
          jajia: "300.0%",
          state: false,
        },
        {
          date: "4",
          name: "加班计薪方案四",
          time: "2019/12/22 23:36:36",
          status: "启用",
          zjia: "150.0%",
          gzjia: "200.0%",
          jajia: "300.0%",
          state: false,
        },
      ],
      num: 100,
      currentPage1: 5,
    };
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    paths() {
      this.$router.push("/home/worksedit");
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  },
};
</script>
  
  <style scoped>
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 90%;
}
.title {
  font-size: 20px;
  font-weight: bold;
}
.el-button {
  width: 80px;
}
.el-button + .el-button,
.el-checkbox.is-bordered + .el-checkbox.is-bordered {
  margin-left: 20px;
}
.div1 {
  margin-top: 20px;
}
.div2 {
  margin-top: 20px;
  float: right;
  margin-bottom: 20px;
}
.tags{
  margin-left: -10px;
  height: 20px;
  line-height: 20px;
}
</style>